<template>
    <div>
        <div class="drawerEditContainer" v-if="propJson.editFlag">
            <div class="innerTitle"><span>抽屉框，仅在配置的时候展示, 可以拖入组件</span></div>
            <div class="innerTitle"><span>{{propJson.title}}</span></div>
            <div style="width: 80%;padding-left: 10%">
                <draggable :list="propJson.innerComponentList"
                           animation="300"
                           :force-fallback="true"
                           :group="{name:'lowcode'}"
                           class="draggableClass"
                           item-key="id"
                >
                    <template #item="{ element }">
                        <div class="itemClass">
                            <component :is="element.component" :propJson="element.propJson" v-if="itemFlag" :commonParam="commonParam" @click.stop="" @dblclick.stop="changeComponentInfo(element)"/>
                            <component is="CloseCircleOutlined" class="closeClass" @click.stop="" @dblclick.stop="deleteComponent(element)"/>
                        </div>
                    </template>
                </draggable>
            </div>
        </div>

        <div class="drawerContainer" v-if="!propJson.editFlag">
            <el-drawer v-model="drawerVisible" @close="closeDrawer()"
                       :title="propJson.title"
                       :direction="propJson.direction"
                       :size="propJson.width"
                       :show-close="propJson.isShowClose"
                       :modal="propJson.isModal"
                       :open-delay="propJson.openDrawerDelay"
                       :close-delay="propJson.closeDrawerDelay"
                       :with-header="true"
                       :lock-scroll="true">
                <el-scrollbar>
                    <div style="width: 97%">
                        <component v-for="item in propJson.innerComponentList" :is="item.component" :propJson="item.propJson" :commonParam="commonParam">
                            <template v-slot:[itemSlot.slotName]="slotProps" v-for="itemSlot in slotList">
                                <slot :name="itemSlot.slotName" :slotProps="slotProps"></slot>
                            </template>
                        </component>
                    </div>
                </el-scrollbar>
            </el-drawer>
        </div>
    </div>
</template>

<script>
import draggable from "vuedraggable";
import {deepCopy} from "@/utils/tagCreate";
import {commonParamChange, getCommonParamInfo, getCommonParamObj} from "@/utils/commonParamUtil";

export default {
    name: "DrawerComponent",
    props: ['propJson', 'commonParam'],
    components: {
        draggable
    },
    data() {
        return {
            temp: false,
            itemFlag: true
        }
    },
    methods: {
        changeComponentInfo(element) {
            this.$store.state.currentDrawer = element.drawerComponent;
            this.$store.state.currentDrawerElementId = element.id;
            this.$store.state.currentDrawerTitle = element.title;
            let copyJson = deepCopy(element.propJson)
            this.$store.commit('changeLowCodeDrawerJsonInfo', copyJson)
            this.$store.state.isShowDrawer = true;
            this.$store.state.lowCodeComponentList = this.propJson.innerComponentList
        },
        deleteComponent(element) {
            let colList = this.propJson.innerComponentList
            // 获取当前列的LIST
            let index = -1;
            // 遍历当前列表，删除元素ID对应的数据
            for (let i = 0; i < colList.length; i++) {
                if (colList[i].id === element.id) {
                    index = i;
                }
            }
            if (index >= 0) {
                this.propJson.innerComponentList.splice(index, 1);
            }
        },
        closeDrawer() {
            let visibleParam = this.propJson.drawerVisibleParam;
            commonParamChange(this.commonParam, visibleParam, false);
        }
    },
    computed: {
        drawerVisible() {
            if (this.propJson.editFlag) {
                return false;
            }
            // 获取绑定的字段
            let visibleParam = this.propJson.drawerVisibleParam;
            return getCommonParamInfo(this.commonParam, visibleParam)
        },
        slotList() {
            let res = getCommonParamObj(this.commonParam, "templateSlotInfo")
            return res.variableValue;
        }
    }
}
</script>

<style scoped lang="less">
.drawerEditContainer {
    //width: 100%;
    border: 1px solid #dcdfe6;
    .innerTitle {
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .itemClass {
        position: relative;
        transition: box-shadow 0.3s ease;
        margin-bottom: 0.3%;
        .closeClass {
            display: none;
        }
    }
    .itemClass:hover {
        cursor: pointer;
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
        .closeClass {
            position: absolute;
            color: #e76565;
            top: 2px;
            right: 2px;
            display: block;
        }
    }
}
</style>